<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Arbab</title>

        <!-- Bootstrap core CSS -->

        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="fonts/css/font-awesome.min.css" rel="stylesheet">
        <link href="css/animate.min.css" rel="stylesheet">

        <!-- Custom styling plus plugins -->
        <link href="css/custom.css" rel="stylesheet">

        <link href="css/multiselect-employee.css" rel="stylesheet">
        <link href="css/multiselect-employee.css" rel="stylesheet">
        <link href="css/icheck/flat/green.css" rel="stylesheet">
        <link rel="stylesheet" href="css/ion.rangeSlider.css" />
        <link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css" />
        <!-- select2 -->
        <link href="css/select/select2.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
        <link rel="stylesheet" href="css/prettify.css" type="text/css">
        <link rel="stylesheet" href="css/bootstrapValidator.min.css"/>
        <link rel="stylesheet" href="css/jasny-bootstrap/jasny-bootstrap.min.css"/>

        <script src="js/jquery.min.js"></script>

    </head>

    <body class="nav-md">
        <div class="container body">
            <div class="main_container">
                <div class="col-md-3 left_col">
                    <div id="menu-bar-container" class="left_col scroll-view"> 
                        <!--Menu bar will be imported over here--> 
                    </div>
                </div>

                <!-- top navigation -->
                <div class="top_nav" id="top_nav">
                    <!--top nav bar will be imported over here-->
                </div>
                <!-- /top navigation --> 

                <!-- page content -->
                <div class="right_col" role="main">
                    <div class="">
                        <div class="page-title">
                            <div class="title_left">
                                <h3>Employee</h3>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="x_panel">
                                    <div class="x_title">
                                        <h2>Add Employee Details</h2>
                                        <div class="clearfix"></div>
                                    </div>

                                    
                                    <div class="x_content">
                                        <div class="alert alert-success alert-dismissable">
                                            <button type="button" class="close" data-dismiss="alert" 
                                                    aria-hidden="true"> &times; </button>
                                            Success! Well done its submitted. </div>
                                        <!-- Tabs --> 
                                        <br />

                                    <!-- Smart Wizard -->
                                    <div id="wizard" class="form_wizard wizard_horizontal">
                                        <ul class="wizard_steps">
                                            <li>
                                                <a href="#step-1">
                                                    <span class="step_no">1</span>
                                                    <span class="step_descr">
                                            Step 1<br />
                                            <small>Official Details</small>
                                        </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#step-2">
                                                    <span class="step_no">2</span>
                                                    <span class="step_descr">
                                            Step 2<br />
                                            <small>Personal Details</small>
                                        </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#step-3">
                                                    <span class="step_no">3</span>
                                                    <span class="step_descr">
                                            Step 3<br />
                                            <small>Contact Details</small>
                                        </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#step-4">
                                                    <span class="step_no">4</span>
                                                    <span class="step_descr">
                                            Step 4<br />
                                            <small>Education Details</small>
                                        </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#step-5">
                                                    <span class="step_no">5</span>
                                                    <span class="step_descr">
                                            Step 5<br />
                                            <small>Work Experience Details</small>
                                        </span>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#step-6">
                                                    <span class="step_no">6</span>
                                                    <span class="step_descr">
                                            Step 6<br />
                                            <small>Upload Documents</small>
                                        </span>
                                                </a>
                                            </li>
                                        </ul>
                                        <div id="step-1">
                                            <h2 class="StepTitle">Step 1 Official Details</h2>
                                            <form id="candidateForm1" data-parsley-validate class="form-horizontal form-label-left">
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-3" for="requirementNo">Registration No <span class="required">*</span> </label>
                                                <div class="col-md-6 col-sm-6">
                                                    <input type="text" id="requirementNo" disabled="disabled" class="form-control col-md-7 col-xs-12">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-3">Branch <span class="required">*</span></label>
                                                <div class="col-md-6 col-sm-6">
                                                    <select name="selectType" class="form-control">
                                                        <option value="">Choose option</option>
                                                        <option>Project one</option>
                                                        <option>Project two</option>
                                                        <option>Project three</option>
                                                        <option>Project four</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-3">Source <span class="required">*</span></label>
                                                <div class="col-md-6 col-sm-6">
                                                    <select name="source" class="form-control">
                                                        <option value="">Choose option</option>
                                                        <option>Project one</option>
                                                        <option>Project two</option>
                                                        <option>Project three</option>
                                                        <option>Project four</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-3">Status </label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <div class="btn-group" data-toggle="buttons">
                                                        <label class="btn btn-default active">
                                                            <input  type="radio" name="status" id="active">
                                                            Active </label>
                                                        <label class="btn btn-default">
                                                            <input  type="radio" name="status" id="inactive">
                                                            Inactive </label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-3">Login Access </label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <div class="btn-group" data-toggle="buttons">
                                                        <label class="btn btn-default active">
                                                            <input  type="radio" name="loginAccess" id="active">
                                                            Yes </label>
                                                        <label class="btn btn-default">
                                                            <input  type="radio" name="loginAccess" id="inactive">
                                                            No </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        
                                        </div>
                                        <div id="step-2">
                                            <h2 class="StepTitle">Step 2 Personal Details</h2>
                                            <div class="col-md-12" style="margin-top:10px">
                                                <div class="col-md-9">
                                                <form id="candidateForm2" data-parsley-validate class="form-horizontal form-label-left">
                                                <div class="form-group">
                                                    <label for="middle-name" class="control-label col-md-4 col-sm-4">Full Name  <span class="required">*</span></label>
                                                    <div class="col-md-3 col-sm-3">
                                                        <input type="text" id="firstname" name="firstname" class="form-control col-md-7 col-xs-12" placeholder="First Name">
                                                    </div>
                                                    <div class="col-md-2 col-sm-2">
                                                        <input type="text" id="middleName" name="middleName" class="form-control col-md-7 col-xs-12" placeholder="Middle Name">
                                                    </div>
                                                    <div class="col-md-3 col-sm-3">
                                                        <input type="text" id="lastName" name="lastName" class="form-control col-md-7 col-xs-12" placeholder="Last Name">
                                                    </div>


                                                </div>
                                                <div class="form-group">
                                                    <label for="middle-name" class="control-label col-md-4 col-sm-4">Father Name</label>
                                                    <div class="col-md-8 col-sm-8">
                                                        <input type="text" id="fatherName" name="fatherName" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="middle-name" class="control-label col-md-4 col-sm-4">Mother Name</label>
                                                    <div class="col-md-8 col-sm-8">
                                                        <input type="text" id="motherName" name="motherName" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>
                                                 <div class="form-group">
                                                    <label class="control-label col-md-4 col-sm-4">Gender <span class="required">*</span>  </label>
                                                    <div class="col-md-8 col-sm-8 col-xs-12">
                                                        <div class="btn-group" data-toggle="buttons">
                                                            <label class="btn btn-default active">
                                                                <input  type="radio" name="gender" id="male" value="male" checked="checked">
                                                                Male </label>
                                                            <label class="btn btn-default">
                                                                <input  type="radio" name="gender" id="female" value="female">
                                                                Female </label>
                                                        </div>
                                                    </div>
                                                </div>                                              
                                                <div class="form-group">
                                                    <label class="control-label col-md-4 col-sm-4" for="contactPerson">Date of Birth <span class="required">*</span> </label>
                                                    <div class="col-md-8 col-sm-8">
                                                        <input type="text" class="date-picker form-control" name="dateReceived" >
                                                        <span id="textBoxName"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-4 col-sm-4">Place of Birth </label>
                                                    <div class="col-md-8 col-sm-8">
                                                        <input type="text" id="birthPlace" name="birthPlace" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-4 col-sm-4">Martial Status</label>
                                                    <div class="col-md-8 col-sm-8">
                                                        <select name="selectMartialStatus" class="form-control">
                                                            <option value="">Choose option</option>
                                                            <option>Project one</option>
                                                            <option>Project two</option>
                                                            <option>Project three</option>
                                                            <option>Project four</option>
                                                        </select>
                                                    </div>
                                                </div> 
                                                <div class="form-group">
                                                    <label class="control-label col-md-4 col-sm-4">Nationality <span class="required">*</span></label>
                                                    <div class="col-md-8 col-sm-8">
                                                        <select name="nationality" class="select_nationality form-control">
                                                            <option value="">Choose option</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                            <option>Option five</option>
                                                            <option>Option six</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-4 col-sm-4">Religion<span class="required">*</span></label>
                                                    <div class="col-md-8 col-sm-8">
                                                        <select name="religion" class="select_religion form-control">
                                                            <option value="">Choose option</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                            <option>Option five</option>
                                                            <option>Option six</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                
                                            
                                                </form>
                                            </div>
                                            <div class="col-md-3">

                                                        <div class="fileinput fileinput-new" data-provides="fileinput">
                                                          <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
                                                          <div>
                                                            <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
                                                            <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
                                                          </div>
                                                        </div>
                                            </div>    
                                        </div>
                                            
                                        </div>


                                        <div id="step-3">
                                                <h2 class="StepTitle">Step 3 Contact Details</h2>
                                                    <form id="candidateForm3" class="form-horizontal form-label-left">
                                               <div class="groupAddress">
                                                  <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3" for="contactPerson">Address <span class="required">*</span> 
                                                    </label>
                                                    <div class="col-md-2 col-sm-2">
                                                        <select class="form-control" style="padding-left: 8px;">
                                                            <option>Home</option>
                                                            <option>Office</option>
                                                            <option>Mobile</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 col-sm-4">
                                                        <input type="text" id="address" name="address" placeholder="Address"  class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                    <div class="">
                                                      <button type="button" class="addAddress addButton"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <div class="col-xs-offset-3 col-md-3 col-sm-3">
                                                        <select class="form-control select_country" name="country">
                                                            <option value="">Select Country</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-3 col-sm-3">
                                                        <select class="form-control select_state" name="state">
                                                            <option value="">Select State</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                        <div class="form-group">
                                                   <div class="col-xs-offset-3 col-md-3 col-sm-3">
                                                        <select class="form-control select_city" name="city">
                                                            <option value="">Select City</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-3 col-sm-3">
                                                        <select class="form-control select_village" name="village">
                                                            <option value="">Select Village</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <label for="middle-name" class="control-label col-md-3 col-sm-3">Pin Code</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="pincode" name="pinCode" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>
                                        </div>
                                                 
                                                <div class="groupAddress hide" id="optionAddressTemplate">
                                                  <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3" for="contactPerson">Address 
                                                    </label>
                                                    <div class="col-md-2 col-sm-2">
                                                        <select class="form-control" style="padding-left: 8px;">
                                                            <option>Home</option>
                                                            <option>Office</option>
                                                            <option>Mobile</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 col-sm-4">
                                                        <input type="text" id="address" name="additionaddress[]" placeholder="Address"  class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                    <div class="">
                                                      <button type="button" class="removeButton"><i class="fa fa-minus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <div class="col-xs-offset-3 col-md-3 col-sm-3">
                                                        <select class="form-control">
                                                            <option>Select Country</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-3 col-sm-3">
                                                        <select class="form-control">
                                                            <option>Select State</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                        <div class="form-group">
                                                   <div class="col-xs-offset-3 col-md-3 col-sm-3">
                                                        <select class="form-control">
                                                            <option>Select City</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-3 col-sm-3">
                                                        <select class="form-control">
                                                            <option>Select Village</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <label for="middle-name" class="control-label col-md-3 col-sm-3">Pin Code</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="pincode" name="pinCode" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>
                                        </div>
                                                <div class="form-group">
                                                    <label for="middle-name" class="control-label col-md-3 col-sm-3">Email Address</label>
                                                    <div class="col-md-6 col-sm-6">
                                                       <input type="text" id="emailID" name="emailId[]" class="form-control col-md-7 col-xs-12">
                                                       <span class="fa fa-envelope-o form-control-feedback right" aria-hidden="true"></span>
                                                    </div>
                                                    <div class="col-xs-1">
                                                      <button type="button" class="addButton addEmailButton"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </div>
                                                <!-- The option field template containing an option field and a Remove button -->
                                                  <div class="form-group hide" id="optionEmailTemplate">
                                                      <div class="col-xs-offset-3  col-md-6 col-sm-6">
                                                        <input type="text" id="emailID" name="emailId[]" class="form-control col-md-7 col-xs-12">
                                                        <span class="fa fa-envelope-o form-control-feedback right" aria-hidden="true"></span>
                                                    </div>
                                                    <div class="col-xs-1">
                                                      <button type="button" class="removeButton"><i class="fa fa-minus"></i></button>
                                                    </div>
                                                  </div>
                                                <div class="form-group">
                                                    <label for="middle-name" class="control-label col-md-3 col-sm-3">Phone Number <span class="required">*</span></label>
                                                    <div class="col-md-2 col-sm-2">
                                                        <select class="form-control" style="padding-left: 8px;">
                                                            <option>Home</option>
                                                            <option>Office</option>
                                                            <option>Mobile</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-4 col-sm-4">
                                                        <input type="text"  name="phoneNumber"  class="form-control col-md-7 col-xs-12 phone">
                                                        <span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span>
                                                    </div>
                                                    <div class="col-xs-1">
                                                      <button type="button" class="addButton addPhoneButton"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </div>
                                                  <!-- The option field template containing an option field and a Remove button -->
                                                  <div class="form-group hide" id="optionPhoneTemplate">
                                                      <div class="col-xs-offset-3  col-md-2 col-sm-2">
                                                        <select class="form-control" style="padding-left: 8px;">
                                                            <option>Home</option>
                                                            <option>Office</option>
                                                            <option>Mobile</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-4">
                                                      <input  class="form-control col-md-7 col-xs-12" type="text" name="addphoneNumber[]" data-mask="(999) 999-9999"/>
                                                      <span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span>
                                                    </div>
                                                    <div class="col-xs-1">
                                                      <button type="button" class="removeButton"><i class="fa fa-minus"></i></button>
                                                    </div>
                                                  </div>
                                                         <div class="form-group">
                                                    <label for="middle-name" class="control-label col-md-3 col-sm-3">Website</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="civilian" name="civilian" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>
                                                         <div class="form-group">
                                                    <label for="middle-name" class="control-label col-md-3 col-sm-3">Skype</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="civilian" name="civilian" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                        <label class="control-label col-md-3 col-sm-3">Remark</label>
                                                        <div class="col-md-6 col-sm-6">
                                                            <textarea class="form-control" rows="3" ></textarea>
                                                        </div>
                                                </div>
                                                </form>
                                        </div>
                                        
                                        <div id="step-4">
                                            <h2 class="StepTitle">Step 4 Educational Details</h2>
                                            <form id="candidateForm4" data-parsley-validate class="form-horizontal form-label-left">
                                                <div class="groupAddress">
                                                  <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3" for="Education">Education</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <select class="select_industry form-control" multiple="multiple">
                                                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                                                <option value="AK">Alaska</option>
                                                                <option value="HI">Hawaii</option>
                                                            </optgroup>
                                                            <optgroup label="Pacific Time Zone">
                                                                <option value="CA">California</option>
                                                                <option value="NV">Nevada</option>
                                                            </optgroup>
                                                            <optgroup label="Mountain Time Zone">
                                                                <option value="AZ">Arizona</option>
                                                                <option value="CO">Colorado</option>
                                                            </optgroup>
                                                            <optgroup label="Central Time Zone">
                                                                <option value="AL">Alabama</option>
                                                                <option value="AR">Arkansas</option>
                                                                <option value="IL">Illinois</option>
                                                            </optgroup>
                                                            <optgroup label="Eastern Time Zone">
                                                                <option value="CT">Connecticut</option>
                                                                <option value="DE">Delaware</option>
                                                            </optgroup>
                                                        </select>
                                                    </div>
                                                    <div class="">
                                                      <button type="button" class="addAddress addButton"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Specialization">Specialization</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <select class="select_industry form-control" multiple="multiple">
                                                        <optgroup label="Alaskan/Hawaiian Time Zone">
                                                            <option value="AK">Alaska</option>
                                                            <option value="HI">Hawaii</option>
                                                        </optgroup>
                                                        <optgroup label="Pacific Time Zone">
                                                            <option value="CA">California</option>
                                                            <option value="NV">Nevada</option>
                                                        </optgroup>
                                                        <optgroup label="Mountain Time Zone">
                                                            <option value="AZ">Arizona</option>
                                                            <option value="CO">Colorado</option>
                                                        </optgroup>
                                                        <optgroup label="Central Time Zone">
                                                            <option value="AL">Alabama</option>
                                                            <option value="AR">Arkansas</option>
                                                            <option value="IL">Illinois</option>
                                                        </optgroup>
                                                        <optgroup label="Eastern Time Zone">
                                                            <option value="CT">Connecticut</option>
                                                            <option value="DE">Delaware</option>
                                                        </optgroup>
                                                    </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="University">University</label>
                                                   <div class="col-md-6 col-sm-6">
                                                         <select class="form-control select_city">
                                                                <option>Select City</option>
                                                                <option>Option one</option>
                                                                <option>Option two</option>
                                                                <option>Option three</option>
                                                                <option>Option four</option>
                                                        </select>
                                                    </div>
                                                </div> 

                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Passing">Year of Passing</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="address" name="epassing"  class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>
                                        </div>
                                              
                                              <div class="groupAddress hide" id="optionAddressTemplate">
                                              <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3" for="Education">Education</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="address" name="address[]" required="required" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                    <div class="col-xs-1">
                                                      <button type="button" class="removeButton"><i class="fa fa-minus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Specialization">Specialization</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <select class="form-control">
                                                            <option>Select Specialization</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="University">University</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <select class="form-control">
                                                            <option>Select University</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                </div> 

                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Passing">Year of Passing</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="address" name="cpassing"  class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>    
                                        </div>



                                                <div class="groupCertification" >
                                              <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3" for="Certification">Certification</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <input type="text" name="country" id="autocomplete-custom-append" class="form-control col-md-10 auto-custom" style="float: left;" />
                                                        <div class="" id="autocomplete-container" style="position: relative; float: left; width: 400px;"></div>
                                                    </div>
                                                    <div class="">
                                                      <button type="button" class="addCertification addButton"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Level">Level</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="level" name="level[]" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Insititue">Insititue</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="insititue" name="insititue[]" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div> 

                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Passing">Year of Passing</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="address" name="cpassing" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>    
                                        </div>

                                        <div class="groupCertification hide" id="optionCertificationTemplate">
                                              <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3" for="Certification">Certification</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <input type="text" name="country" id="autocomplete-custom-append" class="form-control col-md-10 auto-custom1" style="float: left;" />
                                                        <div class="auto-custom1" id="autocomplete-container1" style="position: relative; float: left; width: 400px;"></div>
                                                    </div>
                                                    <div class="col-xs-1">
                                                      <button type="button" class="removeButton"><i class="fa fa-minus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Level">Level</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="level" name="level[]" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Insititue">Insititue</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="insititue" name="insititue[]" class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div> 

                                                <div class="form-group">
                                                   <label class="control-label col-md-3 col-sm-3" for="Passing">Year of Passing</label>
                                                   <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="address" name="cpassing"  class="form-control col-md-7 col-xs-12">
                                                    </div>
                                                </div>    
                                        </div>

                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Remark</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <textarea class="form-control" rows="3" ></textarea>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div id="step-5">
                                            <h2 class="StepTitle">Step 5 Work Experience Details</h2>
                                            <form id="candidateForm5" data-parsley-validate class="form-horizontal form-label-left">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Career Status</label>
                                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                                        <div class="btn-group" data-toggle="buttons">
                                                            <label class="btn btn-default active">
                                                                <input  type="radio" name="careerstatus" id="fresher" value="experience">
                                                               Experienced</label>
                                                            <label class="btn btn-default">
                                                                <input  type="radio" name="careerstatus" id="experience" value="fresher" checked="checked">
                                                                 Fresher </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="groupCompany career">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Company Name</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <select class="form-control select_company">
                                                            <option>Select Company</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-1">
                                                      <button type="button" class="addButton addCompany"><i class="fa fa-plus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Currently Working</label>
                                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                                        <div class="btn-group" data-toggle="buttons">
                                                            <label class="btn btn-default active">
                                                                <input  type="radio" name="careerstatus" id="fresher" value="experience">
                                                               No</label>
                                                            <label class="btn btn-default">
                                                                <input  type="radio" name="careerstatus" id="experience" value="fresher" checked="checked">
                                                                 Yes </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                 <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Designation</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <select class="form-control select_designation">
                                                            <option>Select designation</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Industry</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <select class="select_industry form-control" multiple="multiple">
                                                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                                                <option value="AK">Alaska</option>
                                                                <option value="HI">Hawaii</option>
                                                            </optgroup>
                                                            <optgroup label="Pacific Time Zone">
                                                                <option value="CA">California</option>
                                                                <option value="NV">Nevada</option>
                                                            </optgroup>
                                                            <optgroup label="Mountain Time Zone">
                                                                <option value="AZ">Arizona</option>
                                                                <option value="CO">Colorado</option>
                                                            </optgroup>
                                                            <optgroup label="Central Time Zone">
                                                                <option value="AL">Alabama</option>
                                                                <option value="AR">Arkansas</option>
                                                                <option value="IL">Illinois</option>
                                                            </optgroup>
                                                            <optgroup label="Eastern Time Zone">
                                                                <option value="CT">Connecticut</option>
                                                                <option value="DE">Delaware</option>
                                                            </optgroup>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Work Period</label>
                                                    <div class="col-md-3 col-sm-3">
                                                        <input name="fromdate" id="fromdate" class="date-picker form-control col-md-7 col-xs-12" type="text">
                                                        <span class="fa fa-calendar-o form-control-feedback right" aria-hidden="true"></span>
                                                    </div>
                                                    <div class="col-md-3 col-sm-3">
                                                        <input name="todate" id="todate" class="date-picker form-control col-md-7 col-xs-12" type="text">
                                                        <span class="fa fa-calendar-o form-control-feedback right" aria-hidden="true"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Country</label>
                                                       <div class="col-md-6 col-sm-6">
                                                            <select class="form-control select_country">
                                                                <option>Select Country</option>
                                                                <option>Option one</option>
                                                                <option>Option two</option>
                                                                <option>Option three</option>
                                                                <option>Option four</option>
                                                            </select>
                                                        </div>

                                                </div>

                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">State</label>
                                                        <div class="col-md-6 col-sm-6">
                                                            <select class="form-control select_state">
                                                                <option>Select State</option>
                                                                <option>Option one</option>
                                                                <option>Option two</option>
                                                                <option>Option three</option>
                                                                <option>Option four</option>
                                                            </select>
                                                        </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">City</label>
                                                       <div class="col-md-6 col-sm-6">
                                                            <select class="form-control select_city">
                                                                <option>Select City</option>
                                                                <option>Option one</option>
                                                                <option>Option two</option>
                                                                <option>Option three</option>
                                                                <option>Option four</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    </div>
                                                    <div class="groupCompany hide" id="optionCompanyTemplate">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Company Name</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <select class="form-control select_company1" id="select_company1">
                                                            <option>Select Company</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-xs-1">
                                                        <button type="button" class="removeButton"><i class="fa fa-minus"></i></button>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Currently Working</label>
                                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                                        <div class="btn-group" data-toggle="buttons">
                                                            <label class="btn btn-default active">
                                                                <input  type="radio" name="careerstatus" id="fresher" value="experience">
                                                               No</label>
                                                            <label class="btn btn-default">
                                                                <input  type="radio" name="careerstatus" id="experience" value="fresher" checked="checked">
                                                                 Yes </label>
                                                        </div>
                                                    </div>
                                                </div>
                                                 <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Designation</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <select class="form-control" id="select_designation1">
                                                            <option>Select designation</option>
                                                            <option>Option one</option>
                                                            <option>Option two</option>
                                                            <option>Option three</option>
                                                            <option>Option four</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Industry</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <select class="select_industry form-control" multiple="multiple">
                                                            <optgroup label="Alaskan/Hawaiian Time Zone">
                                                                <option value="AK">Alaska</option>
                                                                <option value="HI">Hawaii</option>
                                                            </optgroup>
                                                            <optgroup label="Pacific Time Zone">
                                                                <option value="CA">California</option>
                                                                <option value="NV">Nevada</option>
                                                            </optgroup>
                                                            <optgroup label="Mountain Time Zone">
                                                                <option value="AZ">Arizona</option>
                                                                <option value="CO">Colorado</option>
                                                            </optgroup>
                                                            <optgroup label="Central Time Zone">
                                                                <option value="AL">Alabama</option>
                                                                <option value="AR">Arkansas</option>
                                                                <option value="IL">Illinois</option>
                                                            </optgroup>
                                                            <optgroup label="Eastern Time Zone">
                                                                <option value="CT">Connecticut</option>
                                                                <option value="DE">Delaware</option>
                                                            </optgroup>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Work Period</label>
                                                    <div class="col-md-3 col-sm-3">
                                                        <input name="fromdate" id="fromdate" class="date-picker form-control col-md-7 col-xs-12" type="text">
                                                        <span class="fa fa-calendar-o form-control-feedback right" aria-hidden="true"></span>
                                                    </div>
                                                    <div class="col-md-3 col-sm-3">
                                                        <input name="todate" id="todate" class="date-picker form-control col-md-7 col-xs-12" type="text">
                                                        <span class="fa fa-calendar-o form-control-feedback right" aria-hidden="true"></span>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Country</label>
                                                       <div class="col-md-6 col-sm-6">
                                                            <select class="form-control select_country1" id="select_country1">
                                                                <option>Select Country</option>
                                                                <option>Option one</option>
                                                                <option>Option two</option>
                                                                <option>Option three</option>
                                                                <option>Option four</option>
                                                            </select>
                                                        </div>

                                                </div>

                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">State</label>
                                                        <div class="col-md-6 col-sm-6">
                                                            <select class="form-control select_state1" id="select_state1">
                                                                <option>Select State</option>
                                                                <option>Option one</option>
                                                                <option>Option two</option>
                                                                <option>Option three</option>
                                                                <option>Option four</option>
                                                            </select>
                                                        </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">City</label>
                                                       <div class="col-md-6 col-sm-6">
                                                            <select class="form-control select_city1" id="select_city1">
                                                                <option>Select City</option>
                                                                <option>Option one</option>
                                                                <option>Option two</option>
                                                                <option>Option three</option>
                                                                <option>Option four</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    </div>

                                                <div class="form-group career ">
                                                    <label class="control-label col-md-3 col-sm-3">Total Work Experience</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="companyName" name="companyName" class="form-control" disabled="disabled">
                                                    </div>
                                                </div>
                                        
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Skills</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <input type="text" id="skills" name="skills" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3 col-sm-3">Remark</label>
                                                    <div class="col-md-6 col-sm-6">
                                                        <textarea class="form-control" rows="3" ></textarea>
                                                    </div>
                                                </div>
                                                <!-- <div class="form-group">
                                                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                                                        <button type="submit" class="btn btn-primary">Cancel</button>
                                                        <button type="submit" class="btn btn-success">Submit</button>
                                                    </div>
                                                </div> -->
                                            </form>
                                        </div>
                                        <div id="step-6">
                                            <h2 class="StepTitle">Step 6 Upload Documents</h2>
                                            <form id="candidateForm6" data-parsley-validate class="form-horizontal form-label-left">
                                                <div class="groupDocuments">
                                                    <div class="form-group">
                                                        <label class="control-label col-md-4 col-sm-4">Document Type </label>
                                                        <div class="col-md-6 col-sm-6">
                                                            
                                                            <input type="text" name="documnet" id="autocomplete-custom-append" class="form-control col-md-10 document-custom" style="float: left;" />
                                                            <div class="" id="document-container" style="position: relative; float: left; width: 400px;"></div>
                                                        </div>

                                                        <div class="">
                                                          <button type="button" class="addDocuments addButton"><i class="fa fa-plus"></i></button>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="control-label col-md-4 col-sm-4">Attach Document</label>
                                                        <div class="col-md-6 col-sm-6">
                                                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                                              <span class="btn btn-default btn-file" style="margin-left:0px;"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
                                                              <span class="fileinput-filename"></span>
                                                              <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="groupDocuments hide" id="optionDocumentsTemplate">
                                                    <div class="form-group">
                                                        <label class="control-label col-md-4 col-sm-4">Document Type </label>
                                                        <div class="col-md-6 col-sm-6">
                                                            <input type="text" id="documentType" name="documentType" class="form-control">
                                                        </div>

                                                        <div class="">
                                                          <button type="button" class="removeButton"><i class="fa fa-minus"></i></button>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="control-label col-md-4 col-sm-4">Attach Document</label>
                                                        <div class="col-md-6 col-sm-6">
                                                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                                              <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
                                                              <span class="fileinput-filename"></span>
                                                              <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                    <!-- End SmartWizard Content -->
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- footer content -->
                    <footer>
                        <div class=""> 
                            <!--p class="pull-right">Gentelella Alela! a Bootstrap 3 template by <a>Kimlabs</a>. |
                                                  <span class="lead"> <i class="fa fa-paw"></i> Gentelella Alela!</span>
                                              </p--> 
                        </div>
                        <div class="clearfix"></div>
                    </footer>
                    <!-- /footer content --> 

                </div>
                <!-- /page content --> 
            </div>
        </div>
        <div id="custom_notifications" class="custom-notifications dsp_none">
            <ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
            </ul>
            <div class="clearfix"></div>
            <div id="notif-group" class="tabbed_notifications"></div>
        </div>
        <script src="js/bootstrap.min.js"></script> 
        <script type="text/javascript" src="js/bootstrapValidator.js"></script>
        <!-- bootstrap progress js --> 
        <script src="js/progressbar/bootstrap-progressbar.min.js"></script> 
        <script src="js/nicescroll/jquery.nicescroll.min.js"></script> 
        <!-- icheck --> 
        <script src="js/icheck/icheck.min.js"></script> 
        <!-- range slider --> 
        <script src="js/ion_range/ion.rangeSlider.min.js"></script> 
        <!-- input mask --> 
        <script src="js/input_mask/jquery.inputmask.js"></script> 
        <script src="js/custom.js"></script> 
        <!-- form wizard --> 
        <script type="text/javascript" src="js/wizard/jquery.smartWizard.js"></script> 
        <!-- select2 --> 
        <script src="js/select/select2.full.js"></script> 
        <!-- tags --> 
        <script src="js/tags/jquery.tagsinput.min.js"></script> 
        <!-- Multiselect -->
        <script type="text/javascript" src="js/prettify.js"></script>
        <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
        <!-- Datatables -->
        <script src="js/datatables/js/jquery.dataTables.js"></script>
        <script src="js/datatables/tools/js/dataTables.tableTools.js"></script>
        <!--file input-->
        <script src="js/jasny-bootstrap/jasny-bootstrap.min.js"></script>

        <script src="js/mask.js"></script>

        <!-- Multiselect -->
        <script type="text/javascript" src="js/prettify.js"></script>
        <script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
        
<script type="text/javascript">
$(document).on('change', 'input[name="careerstatus"]:radio', function(){
    if($(this).val() == 'fresher') {
        $(".career").addClass('hide');
        $("#optionCompanyTemplate").addClass('hide');
    } else {
        $(".career").removeClass('hide');
    }
});
$(document).ready(function() {

    $(".select_industry").multiselect({
                maxHeight: 200,
                includeSelectAllOption: true,
                enableCaseInsensitiveFiltering: true
            });

    $(".select_company").select2({
                    placeholder: "Select Company",
                    allowClear: true
     });

    $(".select_designation").select2({
                    placeholder: "Select Designation",
                    allowClear: true
    });

    $(".select_city").select2({
                    placeholder: "Select City",
                    allowClear: true
     });

    $(".select_country").select2({
                    placeholder: "Select Country",
                    allowClear: true
    });

    $(".select_state").select2({
                    placeholder: "Select State",
                    allowClear: true
     });

    $(".select_village").select2({
                    placeholder: "Select Village",
                    allowClear: true
    });


    $('#candidateForm2').find('[name="dateReceived"]').mask('99/99/9999')
    
    $(".select_visaNo").select2({
                    placeholder: "Select Visa No",
                    allowClear: true
     });

    $(".select_nationality").select2({
        placeholder: "Select Nationality",
        allowClear: true
     });

    $(".select_religion").select2({
        placeholder: "Select Religion",
        allowClear: true
     });

     $('#candidateForm1')
       .bootstrapValidator({
        excluded: ':disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            selectType: {
                validators: {
                    notEmpty: {
                        message: 'The type is required'
                    }
                }
            },
            source:{
                validators: {
                    notEmpty: {
                        message: 'The source is required'
                    }
                }
            }
        }
    });

        $('#candidateForm2')
       .bootstrapValidator({
        excluded: ':disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstname: {
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            nationality: {
                validators: {
                    notEmpty: {
                        message: 'The nationality is required'
                    }
                }
            },
            religion: {
                validators: {
                    notEmpty: {
                        message: 'The religion is required'
                    }
                }
            },
            dateReceived: {
                validators: {
                    notEmpty: {
                        message: 'The date of birth is required'
                    },
                    callback: {
                        message: 'The date is not valid',
                        callback: function(value, validator) {

                            var validformat=/^\d{2}\/\d{2}\/\d{4}$/ //Basic check for format validity
                            if (!validformat.test(value)){
                                return false;
                            }
                            var date = new Date(),
                            today = dateString = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear().toString();

                            function parseDate(str)
                            {
                                var d = str.split("/");
                                return d[2] + d[0] + d[1];
                            }

                            if (parseDate(value) > parseDate(today)) {
                              return false
                            }
                            return true;
                        }
                    }
                }
            }
        }
    });


            $('#candidateForm3')
       .bootstrapValidator({
        excluded: ':disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            address: {
                validators: {
                    notEmpty: {
                        message: 'The address is required'
                    }
                }
            },
            country: {
                validators: {
                    notEmpty: {
                        message: 'The country is required'
                    }
                }
            },
            state: {
                validators: {
                    notEmpty: {
                        message: 'The state is required'
                    }
                }
            },
            city: {
                validators: {
                    notEmpty: {
                        message: 'The city is required'
                    }
                }
            },
            phoneNumber: {
                validators: {
                    notEmpty: {
                        message: 'The phone is required'
                    }
                }
            }
        }
        });


        $('#candidateForm4')
       .bootstrapValidator({
        excluded: ':disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            epassing: {
                validators: {
                    callback: {
                        message: 'Year passing is not valid',
                        callback: function(value, validator) {
                            var date = new Date(),
                            today = dateString = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear().toString();

                            function parseDate(str)
                            {
                                var d = str.split("/");
                                return d[2];
                            }
                            console.log(parseDate(today))
                            if (value > parseDate(today)) {
                              return false
                            }
                            return true;
                        }
                    }
                }
            },
            cpassing: {
                validators: {
                    callback: {
                        message: 'Year passing is not valid',
                        callback: function(value, validator) {
                            var date = new Date(),
                            today = dateString = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear().toString();

                            function parseDate(str)
                            {
                                var d = str.split("/");
                                return d[2];
                            }
                            console.log(parseDate(today))
                            if (value > parseDate(today)) {
                                console.log('soju');
                              return false
                            }
                            return true;
                        }
                    }
                }
            }
        }
    });


// $('#candidateForm5')
//        .bootstrapValidator({
//         excluded: ':disabled',
//         message: 'This value is not valid',
//         feedbackIcons: {
//             valid: 'glyphicon glyphicon-ok',
//             invalid: 'glyphicon glyphicon-remove',
//             validating: 'glyphicon glyphicon-refresh'
//         },
//         fields: {
//             fromdate: {
//                 validators: {
//                     between: {
//                         max: 'todate',
//                         message: 'The number of floors must be between 2 and 100'
//                     }
//                 }
//             }
//         }
//     });

        $('#candidateForm3').find('[name="phoneNumber"]').mask('(099)-099-0990')
                        .find('[name="addphoneNumber"]').mask('(099)-099-0990');


        $('#candidateForm3').find('[name="epassing"]').mask('9999');

             $('#candidateForm3')
        .on('click', '.addAddress', function() {
            var $template = $('#optionAddressTemplate'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="option[]"]');
                

            // Add new field
            //$('#candidateForm1').formValidation('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row    = $(this).parents('.groupAddress'),
                $option = $row.find('[name="option[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
           // $('#surveyForm').formValidation('removeField', $option);
        });

        $('#candidateForm3')
        .on('click', '.addEmailButton', function() {
            var $template = $('#optionEmailTemplate'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="option[]"]');

            // Add new field
            //$('#contactForm').formValidation('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row    = $(this).parents('#optionEmailTemplate'),
                $option = $row.find('[name="option[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
           // $('#surveyForm').formValidation('removeField', $option);
        });

    // The maximum number of options
    var MAX_OPTIONS = 5;
    
    $('#candidateForm3')
        .on('click', '.addPhoneButton', function() {
            var $template = $('#optionPhoneTemplate'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="option[]"]');

            // Add new field
            //$('#candidateForm1').formValidation('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row    = $(this).parents('.form-group'),
                $option = $row.find('[name="option[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
           // $('#surveyForm').formValidation('removeField', $option);
        })

        // Called after adding new field
        .on('added.field.fv', function(e, data) {
            // data.field   --> The field name
            // data.element --> The new field element
            // data.options --> The new field options

            if (data.field === 'option[]') {
                if ($('#candidateForm3').find(':visible[name="option[]"]').length >= MAX_OPTIONS) {
                    $('#candidateForm3').find('.addPhoneButton').attr('disabled', 'disabled');
                }
            }
        })

        // Called after removing the field
        .on('removed.field.fv', function(e, data) {
           if (data.field === 'option[]') {
                if ($('#candidateForm3').find(':visible[name="option[]"]').length < MAX_OPTIONS) {
                    $('#candidateForm3').find('.addPhoneButton').removeAttr('disabled');
                }
            }
        });



    $('#wizard').smartWizard({
        onLeaveStep:leaveAStepCallback,
        onFinish:onFinishCallback
    });

    function leaveAStepCallback(obj, context){
        //alert("Leaving step " + context.fromStep + " to go to step " + context.toStep);
        return validateTab(context.fromStep); // return false to stay on step and true to continue navigation 
    }

    function onFinishCallback(objs, context){
        //if(validateAllSteps()){
            $('form').submit();
        //}
    }

    function validateTab(index) {
        console.log(index);
        // return true;
        if (index == 4 || index == 5 || index == 6) {
            return true;
        }
        var fv   = $('#candidateForm'+index).data('bootstrapValidator'); // FormValidation instance

        // Validate the container
        fv.validate();
        //console.log(fv.validate($tab))
        var isValidStep = fv.isValid();
        console.log(isValidStep)
        if (isValidStep === false || isValidStep === null) {
            // Do not jump to the target tab
            return false;
        }

        return true;
    }

     $('#candidateForm3')
        .on('click', '.addAddress', function() {
            var $template = $('#optionAddressTemplate'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="option[]"]');
                $(":input").inputmask();

            // Add new field
            //$('#candidateForm1').formValidation('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row    = $(this).parents('.groupAddress'),
                $option = $row.find('[name="option[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
           // $('#surveyForm').formValidation('removeField', $option);
        });

        $('#candidateForm6')
        .on('click', '.addDocuments', function() {
            var $template = $('#optionDocumentsTemplate'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="option[]"]');
                $(":input").inputmask();

            // Add new field
            //$('#candidateForm1').formValidation('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row    = $(this).parents('.groupDocuments'),
                $option = $row.find('[name="option[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
           // $('#surveyForm').formValidation('removeField', $option);
        });

        $('#candidateForm5')
        .on('click', '.addCompany', function() {
            var $template = $('#optionCompanyTemplate'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="option[]"]');

            $("#select_company1").select2({
                            placeholder: "Select Company",
                            allowClear: true
             });

            $("#select_designation1").select2({
                            placeholder: "Select Designation",
                            allowClear: true
            });

            $("#select_city1").select2({
                            placeholder: "Select City",
                            allowClear: true
             });

            $("#select_country1").select2({
                            placeholder: "Select Country",
                            allowClear: true
            });

            $(".select_state1").select2({
                            placeholder: "Select State",
                            allowClear: true
             });

                   

            // Add new field
            //$('#candidateForm1').formValidation('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row    = $(this).parents('.groupCompany'),
                $option = $row.find('[name="option[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
           // $('#surveyForm').formValidation('removeField', $option);
        });

        $('#candidateForm4')
        .on('click', '.addCertification', function() {
            var $template = $('#optionCertificationTemplate'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="option[]"]');
            var countriesArray = $.map(countries, function (value, key) {
                return {
                    value: value,
                    data: key
                };
            });
            // Initialize autocomplete with custom appendTo:
            $('.auto-custom1').autocomplete({
                lookup: countriesArray,
                appendTo: '#autocomplete-container1'
            });

            // Add new field
            //$('#candidateForm1').formValidation('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row    = $(this).parents('.groupCertification'),
                $option = $row.find('[name="option[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
           // $('#surveyForm').formValidation('removeField', $option);
        });
    // The maximum number of options
    var MAX_OPTIONS = 5;
    
    $('#candidateForm3')
        .on('click', '.addPhoneButton', function() {
            var $template = $('#optionPhoneTemplate'),
                $clone    = $template
                                .clone()
                                .removeClass('hide')
                                .removeAttr('id')
                                .insertBefore($template),
                $option   = $clone.find('[name="option[]"]');
                $(":input").inputmask();

            // Add new field
            //$('#candidateForm1').formValidation('addField', $option);
        })

        // Remove button click handler
        .on('click', '.removeButton', function() {
            var $row    = $(this).parents('.form-group'),
                $option = $row.find('[name="option[]"]');

            // Remove element containing the option
            $row.remove();

            // Remove field
           // $('#surveyForm').formValidation('removeField', $option);
        })

        // Called after adding new field
        .on('added.field.fv', function(e, data) {
            // data.field   --> The field name
            // data.element --> The new field element
            // data.options --> The new field options

            if (data.field === 'option[]') {
                if ($('#candidateForm3').find(':visible[name="option[]"]').length >= MAX_OPTIONS) {
                    $('#candidateForm3').find('.addPhoneButton').attr('disabled', 'disabled');
                }
            }
        })

        // Called after removing the field
        .on('removed.field.fv', function(e, data) {
           if (data.field === 'option[]') {
                if ($('#candidateForm3').find(':visible[name="option[]"]').length < MAX_OPTIONS) {
                    $('#candidateForm3').find('.addPhoneButton').removeAttr('disabled');
                }
            }
        });



    $('#candidateForm')
        .find('.select_requirement').select2({
                    maximumSelectionLength: 1,
                    placeholder: "Select Requirement",
                    allowClear: true
                })
            // Re-validate the color when it is changed
            .change(function(e) {
                $('#candidateForm')
                    .data('bootstrapValidator')
                    .updateStatus('requirement', 'NOT_VALIDATED')
                    .validateField('requirement');
            })
            .end()
       .bootstrapValidator({
        excluded: ':disabled',
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            selectType: {
                validators: {
                    notEmpty: {
                        message: 'The type is required'
                    }
                }
            },
            source:{
                validators: {
                    notEmpty: {
                        message: 'The source is required'
                    }
                }
            },
            selectStatus:{
                validators: {
                    notEmpty: {
                        message: 'The status is required'
                    }
                }
            },
             requirement: {
                    validators: {
                         notEmpty: {
                            message: 'The requirement is required'
                        }
                    }
                },
            fullName: {
                validators: {
                    notEmpty: {
                        message: 'The full name is required'
                    }
                }
            },
            nationality: {
                validators: {
                    notEmpty: {
                        message: 'The nationality is required'
                    }
                }
            },
            qualification: {
                validators: {
                    notEmpty: {
                        message: 'The education qualification is required'
                    }
                }
            },
         /*   housing_amount: {
                validators: {
                    numeric: {
                        message: 'The value can contain only numbers'
                    }
                }
            },
            food_amount: {
                validators: {
                    digits: {
                        message: 'The value can contain only numbers'
                    }
                }
            }, */
            overTime: {
                validators: {
                    numeric: {
                        message: 'The value can contain only numbers'
                    }
                }
            },
            noOfVisits: {
                validators: {
                    numeric: {
                        message: 'The value can contain only numbers'
                    }
                }
            }
            
        }
    });
});

$(document).ready(function() {
                             var oTable = $('#languageTable').dataTable({
                                 "oLanguage": {
                                     "sSearch": "Search all columns:"
                                 },
                                 "aoColumnDefs": [
                                     {
                                         'bSortable': false,
                                         'aTargets': [0, 2, 3, 4, 5]
                                     } //disables sorting for column one
                                 ],
                                 'iDisplayLength': 4,
                                 "aLengthMenu": [4, 6],
                                 "sPaginationType": "full_numbers",
                                 "dom": 'T<"clear">lfrtip',
                                 "tableTools": {
                                     "sSwfPath": "<?php echo base_url('assets2/js/Datatables/tools/swf/copy_csv_xls_pdf.swf'); ?>"
                                 }
                             });
                             $("tfoot input").keyup(function() {
                                 /* Filter on the column based on the index of this element's parent <th> */
                                 oTable.fnFilter(this.value, $("tfoot th").index($(this).parent()));
                             });
                             $("tfoot input").each(function(i) {
                                 asInitVals[i] = this.value;
                             });
                             $("tfoot input").focus(function() {
                                 if (this.className == "search_init") {
                                     this.className = "";
                                     this.value = "";
                                 }
                             });
                             $("tfoot input").blur(function(i) {
                                 if (this.value == "") {
                                     this.className = "search_init";
                                     this.value = asInitVals[$("tfoot input").index(this)];
                                 }
                             });

                             $("#languageTable_wrapper .DTTT_container").hide();
                             $(".submitLanguages").click(function() {
                                 var cells = [];
                                 var rows = $("#languageTable").dataTable().fnGetNodes();

                                 for (var i = 0; i < rows.length; i++)
                                 {
                                     // Get HTML of 3rd column (for example)
                                     cells.push($(rows[i]).find("td:eq(2)").find("input[type='checkbox']").attr("name"), $(rows[i]).find("td:eq(2)").find("input[type='checkbox']").is(":checked"), $(rows[i]).find("td:eq(3)").find("input[type='checkbox']").is(":checked"), $(rows[i]).find("td:eq(4)").find("input[type='checkbox']").is(":checked"));
                                 }
                                 var i, j, temparray, chunk = 4, html = "";
                                 for (i = 0, j = cells.length; i < j; i += chunk) {
                                     temparray = cells.slice(i, i + chunk);
                                     // do whatever
                                     if (temparray[1] || temparray[2] || temparray[3]) {
                                         var readValue, writeValue, speakValue;
                                         if (temparray[1]) {
                                             readValue = "Y"
                                         } else {
                                             readValue = "N"
                                         }
                                         ;
                                         if (temparray[2]) {
                                             writeValue = "Y"
                                         } else {
                                             writeValue = "N"
                                         }
                                         ;
                                         if (temparray[3]) {
                                             speakValue = "Y"
                                         } else {
                                             speakValue = "N"
                                         }
                                         ;
                                         html += "<tr><td>" + temparray[0] + "</td><td><span class='languageVal'>" + readValue + "</span></td><td><span class='languageVal'>" + writeValue + "</span></td><td><span class='languageVal'>" + speakValue + "</span></td><td><a class='editLanguage'>Edit</a> | <a class='deleteLanguage'>Delete</a></td></tr>";
                                     }
                                 }
                                 $("#languageResult tbody").html(html);
                                 $("#languageResult").removeClass("hidden");

                             });

                             $("#languageResult").delegate(".deleteLanguage", "click", function() {
                                 $(this).closest("tr").remove();
                             });

                             $("#languageResult").delegate(".editLanguage", "click", function() {
                                 var readVal = $(this).closest("tr").find("td:eq(1)").text();
                                 var writeVal = $(this).closest("tr").find("td:eq(2)").text();
                                 var speakVal = $(this).closest("tr").find("td:eq(3)").text();

                                 if (readVal == "Y") {
                                     $(this).closest("tr").find("td:eq(1)").append("<input type='checkbox' checked /></td>");
                                 } else {
                                     $(this).closest("tr").find("td:eq(1)").append("<input type='checkbox' /></td>");
                                 }

                                 if (writeVal == "Y") {
                                     $(this).closest("tr").find("td:eq(2)").append("<input type='checkbox' checked /></td>");
                                 } else {
                                     $(this).closest("tr").find("td:eq(2)").append("<input type='checkbox' /></td>");
                                 }

                                 if (speakVal == "Y") {
                                     $(this).closest("tr").find("td:eq(3)").append("<input type='checkbox' checked /></td>");
                                 } else {
                                     $(this).closest("tr").find("td:eq(3)").append("<input type='checkbox' /></td>");
                                 }

                                 $(this).next(".deleteLanguage").addClass("cancelLanguage").removeClass("deleteLanguage").text("Cancel");
                                 $(this).addClass("updateLanguage").removeClass("editLanguage").text("Update");
                                 $(this).closest("tr").find("span.languageVal").hide();

                             });

                             $("#languageResult").delegate(".updateLanguage", "click", function() {
                                 for (i = 1; i <= 3; i++) {
                                     if ($(this).closest("tr").find("td:eq(" + i + ")").find("input[type='checkbox']").is(":checked"))
                                     {
                                         $(this).closest("tr").find("td:eq(" + i + ")").find("span").text("Y").show();
                                     } else {
                                         $(this).closest("tr").find("td:eq(" + i + ")").find("span").text("N").show();
                                     }
                                     $(this).closest("tr").find("td:eq(" + i + ")").find("input[type='checkbox']").remove();
                                 }
                                 $(this).next(".cancelLanguage").addClass("deleteLanguage").removeClass("cancelLanguage").text("Delete");
                                 $(this).addClass("editLanguage").removeClass("updateLanguage").text("Edit");
                             });

                             $("#languageResult").delegate(".cancelLanguage", "click", function() {
                                 for (i = 1; i <= 3; i++) {
                                     $(this).closest("tr").find("td:eq(" + i + ")").find("input[type='checkbox']").remove();
                                 }
                                 $(this).closest("tr").find("span.languageVal").show();
                                 $(this).prev(".updateLanguage").addClass("editLanguage").removeClass("updateLanguage").text("Edit");
                                 $(this).addClass("deleteLanguage").removeClass("cancelLanguage").text("Delete");
                             });
                         });

</script>

        <!-- Autocomplete -->
        <script type="text/javascript" src="js/autocomplete/countries.js"></script>
        <script src="js/autocomplete/jquery.autocomplete.js"></script>
         <!-- daterangepicker -->
        <script type="text/javascript" src="js/moment.min2.js"></script>
        <script type="text/javascript" src="js/datepicker/daterangepicker.js"></script>
        <script type="text/javascript">

        $('#fromdate').daterangepicker({
            singleDatePicker: true,
            calender_style: "picker_4"
        }, function (start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
        });

        $('#todate').daterangepicker({
            singleDatePicker: true,
            calender_style: "picker_4"
        }, function (start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
        });

        $(function () {
            'use strict';
            var countriesArray = $.map(countries, function (value, key) {
                return {
                    value: value,
                    data: key
                };
            });
            // Initialize autocomplete with custom appendTo:
            $('#autocomplete-custom-append').autocomplete({
                lookup: countriesArray,
                appendTo: '#autocomplete-container'
            });

            // Initialize autocomplete with custom appendTo:
            $('.document-custom').autocomplete({
                lookup: countriesArray,
                appendTo: '#document-container'
            });
        });
        </script>

    </body>
</html>